<template>
  <vab-card class="authorization" shadow="hover" skeleton>
    <template #header>
      <vab-icon icon="bar-chart-2-line" />
      {{ translate('物资出入库曲线图') }}
      <!-- <el-tag class="card-header-tag" type="warning">周</el-tag> -->
    </template>
    <vab-chart
      :init-options="initOptions"
      :option="option"
      theme="vab-echarts-theme"
    />
    <div class="bottom">
      <span>
        <!-- 授权数: -->
        <!-- <vab-count
          :decimals="countConfig.decimals"
          :duration="countConfig.duration"
          :end-val="countConfig.endVal"
          :prefix="countConfig.prefix"
          :separator="countConfig.separator"
          :start-val="countConfig.startVal"
          :suffix="countConfig.suffix"
        /> -->
        <!-- <el-tag class="card-footer-tag" type="success">倒计时 {{ n }}s</el-tag> -->
      </span>
    </div>
  </vab-card>
</template>

<script>
  import _ from 'lodash'
  import VabChart from '@/plugins/VabChart'
  // import VabCount from '@/plugins/VabCount'
  import { useSettingsStore } from '@/store/modules/settings'
  import { getpageASIO } from '@/api/form'
  import { translate } from '@/i18n'
  export default defineComponent({
    name: 'Authorization',
    components: {
      VabChart,
      // VabCount,
    },
    props: {
      searchtime: {
        type: Array,
        default: () => {
          return []
        },
      },
      searchinfo: {
        type: String,
        default: '',
      },
      searchinfo1: {
        type: String,
        default: '',
      },
      datetype: {
        type: String,
        default: '',
      },
      sign: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        option: {
          tooltip: {
            trigger: 'axis',
            extraCssText: 'z-index:1',
          },
          grid: {
            top: '5%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '入库',
              type: 'line',
              barWidth: '40%',
              data: [],
            },
            {
              name: '出库',
              type: 'line',
              barWidth: '40%',
              data: [],
            },
          ],
        },
        list_pic: {
          xAxis: [],
          series: [],
          series1: [],
        },
        time: this.searchtime,
        bgyear: this.searchinfo,
        endyear: this.searchinfo1,
        datetypes: this.datetype,
        itemcode: '',
        signs: this.sign,
      }
    },
    watch: {
      searchtime(val) {
        console.log(val)
        if(val) {
          this.time = val
          // this.billchartdatas()
        }
      },
      searchinfo(val) {
        if(val) {
          this.bgyear = val
          // this.billchartdatas()
        }
      },
      searchinfo1(val) {
        if(val) {
          this.endyear = val
        }
      },
      sign(val) {
        if(val) {
          this.signs = val
          this.billchartdatas()
        }
      },
    },
    created() {
      this.billchartdatas()
    },
    methods:{
      translate(row) {
        return translate(row)
      },
      childMethod(val) {
        this.billchartdatas(val)
        console.log(val)
      },
      async billchartdatas(val) {
        if(val){
          this.datetypes = val.dateType
        }
        console.log(this.time)
         const params = {
            dateType: this.datetypes,
            beginDate: this.datetypes ==='YE' ? this.bgyear :  this.time[0],
            endDate: this.datetypes ==='YE' ? this.endyear :  this.time[1],
            sign:this.signs === '入库(+)'? '+':this.signs === '出库(-)' ? '-':'',
            itemCode: val ? val.itemcode : '',
            whUnit: val ? val.whUnit:'',
           }
        const data = await getpageASIO(params)
        if(data.code === '200') {
          this.list_pic.xAxis = []
          this.list_pic.series = []
          if(data.data.rows && data.data.rows.length>0) {
            data.data.rows.map((item) =>{
              this.list_pic.xAxis.push(item.DateName)
              this.list_pic.series.push(item.InQty)
              this.list_pic.series1.push(item.OuQty)
            })
            this.option.xAxis[0].data = this.list_pic.xAxis
            this.option.series[0].data = this.list_pic.series
            this.option.series[1].data = this.list_pic.series1
          }else {
            this.option.xAxis[0].data = []
            this.option.series[0].data = []
            this.option.series[1].data = []
          }
          console.log(this.list_pic.xAxis)
        }
      },
    }
  })
</script>
